<!--<template>-->
<!--  <div class="app-container">-->


<!--    <div>-->
<!--      <div class="custom-icon-text">-->
<!--        <el-button icon="el-icon-s-data" @click="resetQuery1" class="custom-button">总数<br><br>{{total}}</el-button>-->

<!--        <div class="search-form">-->
<!--          <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">-->
<!--            <el-form-item  prop="taskName">-->
<!--              <el-input-->
<!--                v-model="queryParams.taskName"-->
<!--                placeholder="请输入任务名称"-->
<!--                clearable-->
<!--                @keyup.enter.native="handleQuery"-->
<!--              />-->
<!--            </el-form-item>-->

<!--            <el-form-item>-->
<!--              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>-->
<!--              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">高级检索</el-button>-->
<!--              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置条件</el-button>-->
<!--            </el-form-item>-->
<!--          </el-form>-->
<!--        </div>-->

<!--        <div class="add-box">-->
<!--          <el-row :gutter="10" class="mb8">-->
<!--            <el-col :span="1.5">-->
<!--              <el-button-->
<!--                type="primary"-->
<!--                plain-->
<!--                icon="el-icon-circle-plus"-->
<!--                size="mini"-->
<!--                @click="handleAdd"-->
<!--                v-hasPermi="['system:alarmManage:add']"-->
<!--              >新增布控</el-button>-->
<!--            </el-col>-->
<!--          </el-row>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <br>-->

<!--    <div>-->
<!--      <h6 style="display: inline;">布防状态 :-->
<!--        <el-button style="font-size: 10px" @click="getList">全部</el-button>-->
<!--        <el-button style="font-size: 10px" @click="queryAllByTasksStatusIs0">未开始</el-button>-->
<!--        <el-button style="font-size: 10px" @click="queryAllByTasksStatusIs1">执行中</el-button>-->
<!--        <el-button style="font-size: 10px" @click="queryAllByTasksStatusIs2">已暂停</el-button>-->
<!--        <el-button style="font-size: 10px" @click="queryAllByTasksStatusIs3">已结束</el-button>-->
<!--        <el-button style="font-size: 10px" @click="queryAllByTasksStatusIs4">已撤控</el-button>-->
<!--      </h6>-->
<!--    </div>-->





<!--&lt;!&ndash;      <el-col :span="1.5">&ndash;&gt;-->
<!--&lt;!&ndash;        <el-button&ndash;&gt;-->
<!--&lt;!&ndash;          type="success"&ndash;&gt;-->
<!--&lt;!&ndash;          plain&ndash;&gt;-->
<!--&lt;!&ndash;          icon="el-icon-edit"&ndash;&gt;-->
<!--&lt;!&ndash;          size="mini"&ndash;&gt;-->
<!--&lt;!&ndash;          :disabled="single"&ndash;&gt;-->
<!--&lt;!&ndash;          @click="handleUpdate"&ndash;&gt;-->
<!--&lt;!&ndash;          v-hasPermi="['alarm:task:edit']"&ndash;&gt;-->
<!--&lt;!&ndash;        >修改</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;      </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-col :span="1.5">&ndash;&gt;-->
<!--&lt;!&ndash;        <el-button&ndash;&gt;-->
<!--&lt;!&ndash;          type="danger"&ndash;&gt;-->
<!--&lt;!&ndash;          plain&ndash;&gt;-->
<!--&lt;!&ndash;          icon="el-icon-delete"&ndash;&gt;-->
<!--&lt;!&ndash;          size="mini"&ndash;&gt;-->
<!--&lt;!&ndash;          :disabled="multiple"&ndash;&gt;-->
<!--&lt;!&ndash;          @click="handleDelete"&ndash;&gt;-->
<!--&lt;!&ndash;          v-hasPermi="['alarm:task:remove']"&ndash;&gt;-->
<!--&lt;!&ndash;        >删除</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;      </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-col :span="1.5">&ndash;&gt;-->
<!--&lt;!&ndash;        <el-button&ndash;&gt;-->
<!--&lt;!&ndash;          type="warning"&ndash;&gt;-->
<!--&lt;!&ndash;          plain&ndash;&gt;-->
<!--&lt;!&ndash;          icon="el-icon-download"&ndash;&gt;-->
<!--&lt;!&ndash;          size="mini"&ndash;&gt;-->
<!--&lt;!&ndash;          @click="handleExport"&ndash;&gt;-->
<!--&lt;!&ndash;          v-hasPermi="['alarm:task:export']"&ndash;&gt;-->
<!--&lt;!&ndash;        >导出</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;      </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>&ndash;&gt;-->
<!--&lt;!&ndash;    </el-row>&ndash;&gt;-->

<!--    <template>-->
<!--      <div id="app">-->
<!--        <p7>共<p7 style="font-size: 16px;color: #1ab394">{{total}}</p7>条信息</p7>-->
<!--        <div class="card-container">-->
<!--          <div class="card" v-for="(task, index) in taskList" :key="index">-->
<!--            <div class="card-body">-->
<!--              <div class="card-info" >-->
<!--&lt;!&ndash;                <p><strong>序号:</strong> {{ task.id }}</p>&ndash;&gt;-->
<!--&lt;!&ndash;                任务名称:&ndash;&gt;-->
<!--                <h3><strong></strong> {{ task.taskName }}</h3>-->
<!--                <p class="inline-field" style="font-size: 10px"><strong>布防人:</strong> {{ task.defender }}</p>-->
<!--                <p class="inline-field" style="font-size: 10px">-->
<!--                  <strong>布防状态:</strong>-->
<!--                  {{ task.defenseStatus === 0 ? '未开始' :-->
<!--                  task.defenseStatus === 1 ? '执行中' :-->
<!--                    task.defenseStatus === 2 ? '已暂停' :-->
<!--                      task.defenseStatus === 3 ? '已撤控' :-->
<!--                        task.defenseStatus === 4 ? '已结束' : '未知状态' }}-->
<!--                </p>-->
<!--                <p style="font-size: 10px"><strong>布防有效期限:</strong> {{ parseTime(task.validPeriod, '{y}-{m}-{d}') }}至{{ parseTime(task.lastModified, '{y}-{m}-{d}') }}</p>-->
<!--                <p style="font-size: 10px">-->
<!--                  <strong>布控对象:</strong>-->
<!--                  {{ task.targetObject === 0 ? '库布控' :-->
<!--                  task.targetObject === 1 ? '人员布控' :-->
<!--                    task.targetObject === 2 ? '实有人口布控' : '未知类型' }}-->
<!--                </p>-->
<!--                <p style="font-size: 10px"><strong>创建时间:</strong> {{ parseTime(task.creationTime, '{y}-{m}-{d}') }}</p>-->
<!--              </div>-->
<!--              <div class="card-footer">-->
<!--                <el-button-->
<!--                  size="mini"-->
<!--                  type="text"-->
<!--                  icon="el-icon-document"-->
<!--                  @click="handleUpdate(task)"-->
<!--                  v-hasPermi="['alarm:task:edit']"-->
<!--                >详情</el-button>-->
<!--                <el-button-->
<!--                  v-if="task.defenseStatus !== 1"-->
<!--                  size="mini"-->
<!--                  type="text"-->
<!--                  icon="el-icon-edit-outline"-->
<!--                  @click="handleUpdate(task)"-->
<!--                  v-hasPermi="['alarm:task:edit']"-->
<!--                >编辑</el-button>-->
<!--                <el-button-->
<!--                  v-if="task.defenseStatus === 1"-->
<!--                  size="mini"-->
<!--                  type="text"-->
<!--                  icon="el-icon-video-pause"-->
<!--                  @click="handlePause(task.id)"-->
<!--                  v-hasPermi="['alarm:task:edit']"-->
<!--                >暂停</el-button>-->
<!--                <el-button-->
<!--                  v-if="task.defenseStatus === 3 || task.defenseStatus === 4"-->
<!--                  size="mini"-->
<!--                  type="text"-->
<!--                  icon="el-icon-back"-->
<!--                  @click="handleUpdate(task)"-->
<!--                  v-hasPermi="['alarm:task:edit']"-->
<!--                >撤控</el-button>-->
<!--                <el-button-->
<!--                  size="mini"-->
<!--                  type="text"-->
<!--                  icon="el-icon-message-solid"-->
<!--                  @click="handleDelete(task)"-->
<!--                  v-hasPermi="['alarm:task:remove']"-->
<!--                >告警</el-button>-->
<!--              </div>-->
<!--            </div>-->

<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </template>-->

<!--    <br>-->
<!--    <br>-->
<!--    <br>-->
<!--    <br>-->
<!--    <br>-->
<!--    <br>-->

<!--    <pagination-->
<!--      v-show="total>0"-->
<!--      :total="total"-->
<!--      :page.sync="queryParams.pageNum"-->
<!--      :limit.sync="queryParams.pageSize"-->
<!--      @pagination="getList"-->
<!--    />-->



<!--    &lt;!&ndash; 添加或修改布控-->
<!--对话框 &ndash;&gt;-->
<!--    <el-dialog :title="title" :visible.sync="open"  width="900px" :style="{ height: '700px' }" append-to-body>-->
<!--      <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
<!--        <el-form-item label="布防名称" prop="taskName">-->
<!--          <el-input v-model="form.taskName" placeholder="请输入布防名称" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="布防有效期限" prop="validPeriod">-->
<!--          <el-date-picker clearable-->
<!--            v-model="form.validPeriod"-->
<!--            type="date"-->
<!--            value-format="yyyy-MM-dd"-->
<!--            placeholder="请选择布防有效期限">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->


<!--          <el-form-item label="布控对象" prop="targetObject">-->
<!--            <el-radio v-model="form.targetObject" :label="0" class="custom-radio">库布控</el-radio>-->
<!--            <el-radio v-model="form.targetObject" :label="1" class="custom-radio">人员布控</el-radio>-->
<!--            <el-radio v-model="form.targetObject" :label="2" class="custom-radio">实有人口布控</el-radio>-->
<!--          </el-form-item>-->


<!--        <el-form-item label="最后修改时间" prop="lastModified">-->
<!--          <el-date-picker clearable-->
<!--            v-model="form.lastModified"-->
<!--            type="date"-->
<!--            value-format="yyyy-MM-dd"-->
<!--            placeholder="请选择最后修改时间">-->
<!--          </el-date-picker>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
<!--        <el-button @click="cancel">取 消</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import {-->
<!--  listTask,-->
<!--  getTask,-->
<!--  delTask,-->
<!--  addTask,-->
<!--  updateTask,-->
<!--  queryAllByTasksStatusIs4,-->
<!--  queryAllByTasksStatusIs0,-->
<!--  queryAllByTasksStatusIs1,-->
<!--  queryAllByTasksStatusIs2,-->
<!--  queryAllByTasksStatusIs3,-->
<!--  updateByStatusIs1-->
<!--} from "@/api/system/alarm/task";-->
<!--import axios from "axios";-->

<!--export default {-->
<!--  name: "Task",-->

<!--  data() {-->
<!--    return {-->
<!--      text: {-->
<!--        type: "总数",-->
<!--        default: '1',-->
<!--      },-->
<!--      iconClass: {-->
<!--        type: String,-->
<!--        default: 'el-icon-s-data',-->
<!--      },-->
<!--      // 遮罩层-->
<!--      loading: true,-->
<!--      // 选中数组-->
<!--      ids: [],-->
<!--      // 非单个禁用-->
<!--      single: true,-->
<!--      // 非多个禁用-->
<!--      multiple: true,-->
<!--      // 显示搜索条件-->
<!--      showSearch: true,-->
<!--      // 总条数-->
<!--      total: 0,-->
<!--      // 布控表格数据-->
<!--      taskList: [],-->
<!--      // 弹出层标题-->
<!--      title: "",-->
<!--      // 是否显示弹出层-->
<!--      open: false,-->
<!--      // 查询参数-->
<!--      queryParams: {-->
<!--        pageNum: 1,-->
<!--        pageSize: 12,-->
<!--        taskName: null,-->
<!--        defender: null,-->
<!--        defenseStatus: null,-->
<!--        validPeriod: null,-->
<!--        targetObject: null,-->
<!--        alarmCount: null,-->
<!--        creationTime: null,-->
<!--        lastModified: null,-->
<!--        operationStatus: null-->
<!--      },-->
<!--      // 表单参数-->
<!--      form: {},-->
<!--      // 表单校验-->
<!--      rules: {-->
<!--        taskName: [-->
<!--          { required: true, message: "任务名称不能为空", trigger: "blur" }-->
<!--        ],-->
<!--        defender: [-->
<!--          { required: true, message: "布防人不能为空", trigger: "blur" }-->
<!--        ],-->
<!--        defenseStatus: [-->
<!--          { required: true, message: "布防状态，可以是“0-未开始”,“1-执行中”,2-已暂停,3-已撤控 4-已结束不能为空", trigger: "change" }-->
<!--        ],-->
<!--        validPeriod: [-->
<!--          { required: true, message: "布防有效期限不能为空", trigger: "blur" }-->
<!--        ],-->
<!--        targetObject: [-->
<!--          { required: true, message: "布控对象 0-库布控 1-人员布控 2-实有人口布控不能为空", trigger: "blur" }-->
<!--        ],-->
<!--      }-->
<!--    };-->
<!--  },-->
<!--  created() {-->
<!--    this.getList();-->
<!--  },-->
<!--  methods: {-->
<!--    handlePause(id) {-->
<!--      // 发送请求到后端，使用封装的 updateByStatusIs1 方法-->
<!--      updateByStatusIs1(id)-->
<!--        .then(response => {-->
<!--          // 处理成功响应-->
<!--          alert('任务已暂停', response);-->
<!--          this.getList();-->
<!--          // 在这里，您可以根据response的内容更新前端的状态或执行其他操作-->
<!--        })-->
<!--        .catch(error => {-->
<!--          // 处理错误-->
<!--          alert('暂停任务失败', error);-->
<!--          // 在这里，您可以处理错误，比如显示错误消息给用户-->
<!--        });-->
<!--    },-->
<!--    queryAllByTasksStatusIs0(){-->
<!--      queryAllByTasksStatusIs0().then(res=>{-->
<!--        this.taskList = res.data-->
<!--      })-->
<!--    },-->
<!--    queryAllByTasksStatusIs1(){-->
<!--      queryAllByTasksStatusIs1().then(res=>{-->
<!--        this.taskList = res.data-->
<!--      })-->
<!--    },-->
<!--    queryAllByTasksStatusIs2(){-->
<!--      queryAllByTasksStatusIs2().then(res=>{-->
<!--        this.taskList = res.data-->
<!--      })-->
<!--    },-->
<!--    queryAllByTasksStatusIs3(){-->
<!--      queryAllByTasksStatusIs3().then(res=>{-->
<!--        this.taskList = res.data-->
<!--      })-->
<!--    },-->
<!--    queryAllByTasksStatusIs4(){-->
<!--      queryAllByTasksStatusIs4().then(res=>{-->
<!--        this.taskList = res.data-->
<!--      })-->
<!--    },-->
<!--    /** 查询布控-->
<!--列表 */-->
<!--    getList() {-->
<!--      this.loading = true;-->
<!--      listTask(this.queryParams).then(response => {-->
<!--        this.taskList = response.data.rows;-->
<!--        this.total = response.data.total;-->
<!--        this.loading = false;-->
<!--      });-->
<!--    },-->
<!--    // 取消按钮-->
<!--    cancel() {-->
<!--      this.open = false;-->
<!--      this.reset();-->
<!--    },-->
<!--    // 表单重置-->
<!--    reset() {-->
<!--      this.form = {-->
<!--        id: null,-->
<!--        taskName: null,-->
<!--        defender: null,-->
<!--        defenseStatus: null,-->
<!--        validPeriod: null,-->
<!--        targetObject: null,-->
<!--        alarmCount: null,-->
<!--        creationTime: null,-->
<!--        lastModified: null,-->
<!--        operationStatus: null-->
<!--      };-->
<!--      this.resetForm("form");-->
<!--    },-->
<!--    /** 搜索按钮操作 */-->
<!--    handleQuery() {-->
<!--      this.queryParams.pageNum = 1;-->
<!--      this.getList();-->
<!--    },-->
<!--    /** 重置按钮操作 */-->
<!--    resetQuery() {-->
<!--      this.resetForm("queryForm");-->
<!--      this.handleQuery();-->
<!--    },-->
<!--    resetQuery1() {-->
<!--      alert("别想那么多.没那么多效果!")-->
<!--    },-->
<!--    // 多选框选中数据-->
<!--    handleSelectionChange(selection) {-->
<!--      this.ids = selection.map(item => item.id)-->
<!--      this.single = selection.length!==1-->
<!--      this.multiple = !selection.length-->
<!--    },-->
<!--    /** 新增按钮操作 */-->
<!--    handleAdd() {-->
<!--      this.reset();-->
<!--      this.open = true;-->
<!--      this.title = "新增人员布控";-->
<!--    },-->
<!--    /** 修改按钮操作 */-->
<!--    handleUpdate(row) {-->
<!--      this.reset();-->
<!--      const id = row.id || this.ids-->
<!--      getTask(id).then(response => {-->
<!--        this.form = response.data;-->
<!--        this.open = true;-->
<!--        this.title = "修改人员布控";-->
<!--      });-->
<!--    },-->
<!--    /** 提交按钮 */-->
<!--    submitForm() {-->
<!--      this.$refs["form"].validate(valid => {-->
<!--        if (valid) {-->
<!--          if (this.form.id != null) {-->
<!--            updateTask(this.form).then(response => {-->
<!--              this.$modal.msgSuccess("修改成功");-->
<!--              this.open = false;-->
<!--              this.getList();-->
<!--            });-->
<!--          } else {-->
<!--            addTask(this.form).then(response => {-->
<!--              this.$modal.msgSuccess("新增成功");-->
<!--              this.open = false;-->
<!--              this.getList();-->
<!--            });-->
<!--          }-->
<!--        }-->
<!--      });-->
<!--    },-->
<!--    /** 删除按钮操作 */-->
<!--    handleDelete(row) {-->
<!--      const ids = row.id || this.ids;-->
<!--      this.$modal.confirm('是否确认删除布控编号为"' + ids + '"的数据项？').then(function() {-->
<!--        return delTask(ids);-->
<!--      }).then(() => {-->
<!--        this.getList();-->
<!--        this.$modal.msgSuccess("删除成功");-->
<!--      }).catch(() => {});-->
<!--    },-->
<!--    /** 导出按钮操作 */-->
<!--    handleExport() {-->
<!--      this.download('alarm/task/export', {-->
<!--        ...this.queryParams-->
<!--      }, `task_${new Date().getTime()}.xlsx`)-->
<!--    }-->
<!--  }-->
<!--};-->


<!--</script>-->

<!--<style scoped>.custom-icon-text {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--}-->


<!--</style>-->

<!--<style scoped>.search-form {-->
<!--  margin-left: 450px; /* 调整这个值来改变距离 */-->
<!--}-->
<!--</style>-->


<!--<style scoped>.add-box {-->
<!--  margin-left: 200px; /* 调整这个值来改变距离 */-->
<!--}-->
<!--</style>-->


<!--<style scoped>.custom-button {-->
<!--  border: none; /* 移除边框 */-->
<!--  background-color: transparent; /* 移除背景色 */-->
<!--  color: inherit; /* 继承父元素颜色 */-->
<!--  padding: 0; /* 移除内边距 */-->
<!--}-->

<!--.custom-button .el-icon-s-data {-->
<!--  display: none; /* 隐藏图标 */-->
<!--}-->



<!--.custom-button span {-->
<!--  font-size: 14px; /* 调整字体大小 */-->
<!--}-->

<!--.card-body {-->
<!--  border: 1px solid #000; /* 边框 */-->
<!--  padding: -10px; /* 内边距，可以根据需要调整 */-->
<!--  margin: 10px; /* 外边距，减少以让盒子整体更紧凑 */-->
<!--  /* 如果需要，也可以设置具体的高度和宽度 */-->
<!--  height: auto; /* 或者设置一个具体的高度值 */-->
<!--  width: 280px; /* 或者设置一个具体的宽度值 */-->
<!--  /* 使用max-width和max-height可以限制盒子的最大尺寸 */-->
<!--  max-width: 300px; /* 限制最大宽度 */-->
<!--  max-height: 250px; /* 限制最大高度 */-->
<!--  /* 使用overflow属性处理内容溢出 */-->
<!--  overflow: auto; /* 当内容超出盒子大小时，显示滚动条 */-->
<!--}-->
<!--</style>-->


<!--<style>.card-info .inline-field {-->
<!--  display: inline-block; /* 或者使用 'inline'，但 'inline-block' 提供了更多的控制，比如宽度和高度 */-->
<!--  margin-right: 35px; /* 可选，为字段之间添加一些间距 */-->
<!--}-->
<!--h3 {-->
<!--  font-family: 'Arial', sans-serif;-->
<!--  font-size: 20px;-->
<!--  color: #1e1e1e;-->
<!--  font-weight: bold;-->
<!--  text-transform: uppercase;-->
<!--}-->
<!--.custom-icon-text {-->
<!--  display: flex;-->
<!--  align-items: center; /* 垂直居中 */-->
<!--}-->

<!--.card-container {-->
<!--  display: flex;-->
<!--  flex-wrap: wrap; /* 防止子元素换行 */-->
<!--  overflow-x: auto; /* 如果子元素超出容器宽度，允许水平滚动 */-->
<!--}-->

<!--p7 {-->
<!--    font-size: 16px;-->
<!--    display: flex;-->
<!--    flex-wrap: wrap; /* 防止子元素换行 */-->
<!--    overflow-x: auto; /* 如果子元素超出容器宽度，允许水平滚动 */-->
<!--}-->

<!--.card {-->
<!--  flex: 0 0 auto; /* 不允许卡片伸缩，保持其原始大小 */-->
<!--  margin-right: 10px; /* 卡片之间的间距 */-->
<!--  /* 根据需要设置卡片的宽度、高度等样式 */-->
<!--}-->

<!--</style>-->

